<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层叠</title>
<style>
	
</style>
</head>
<body>
<!--
 	七阶层叠水平
	 层叠上下文的background/border << 负z-index << block块状盒子 << float浮动盒子 << inline/inline-block盒子 << z-index:auto或者看成z-index:0 不依赖z-index的层叠上下文 << 正z-index 
	规范元素重叠的表现 功能和视觉呈现. 装饰 ===》 布局 ===》 内容
	层叠水平:谁离官员更近
	层叠上下文：谁离皇帝更近
	我：皇帝 层叠水平在层叠上下文中
	层叠上下文可以嵌套-兄弟元素不影响-上下文自成体系

	七阶顺序 加 后来居上原则===

	根元素 html...
	auto可以看成0 auto不会创建层叠上下文 比较止步父元素。。。
	整个覆盖 元素变为容器
	z-index受限于父元素。。。

	其他css属性和层叠上下文
		flex--子元素z-index不auto
		opacity--透明度不为1
		transform-- mix-blend-mode--混合模式--filter--cs3滤镜isolation--独立
		fixed--chrome 等 ie firefox不会直接生效
		will-change---- 
	
	不支持z-index元素z-index为auto
	淡入淡出效果产生层叠上下文 
	层叠上下文元素是一个整体的 bg到inline元素整个 相对其他都是一个水平...
	最小化影响 避免定位
	不犯二 非浮层元素 避免设置z-index值 z-index没理由超过2...
	组件层级覆盖器 避免浮层组件z-index被覆盖 组件的覆盖规则具有动态性 js获取body下z-index最大的值
	负值z-index 与可访问性隐藏
	
 -->
<div style="padding:20px;color:#fff;">
	<div style="width: 260px;padding:10px;background-color: #b475c1;height: 100px;box-shadow: 0 0 1px 1px rgba(222,222,222,.8)">层叠上下文<br>background、border</div>
	<div style="width: 260px;padding:10px;margin-top:-64px;height: 100px;box-shadow: 0 0 1px 1px rgba(222,222,222,.8);margin-left: 160px;background-color: #8975c1">负z-index</div>
	<div style="width: 260px;padding:10px;margin-top:-64px;height: 100px;box-shadow: 0 0 1px 1px rgba(222,222,222,.8);margin-left: 320px;background-color: #4f70c1">block块状水平盒子</div>
	<div style="width: 260px;padding:10px;margin-top:-64px;height: 100px;box-shadow: 0 0 1px 1px rgba(222,222,222,.8);margin-left: 480px;background-color: #51cd8e">float浮动盒子</div>
	<div style="width: 260px;padding:10px;margin-top:-64px;height: 100px;box-shadow: 0 0 1px 1px rgba(222,222,222,.8);margin-left: 600px;background-color: #9cd262">inline/inline-block盒子</div>
	<div style="width: 260px;padding:10px;margin-top:-64px;height: 100px;box-shadow: 0 0 1px 1px rgba(222,222,222,.8);margin-left: 720px;background-color: #d9ac4d">z-index:auto或者看成z-index:0<br>不依赖z-index的层叠上下文</div>
	<div style="width: 260px;padding:10px;margin-top:-64px;height: 100px;box-shadow: 0 0 1px 1px rgba(222,222,222,.8);margin-left: 880px;background-color: #d83953">正z-index</div>
</div>
 <img src="zhy.jpg" alt="" style="float: left;margin-right: -20px;border:10px solid transparent;">
 <div style="">
 	fsfsfsafwodfwedfefdfaffefafwefsdfsf
 </div>
 <!-- 同级别dadada -->
 <img src="zhy.jpg" alt="" style="float: left;margin-right: -120px;position: relative;z-index: 4">
 <img src="zhy.jpg" alt="" style="float: left;margin-right: -120px;position: relative;z-index: 3">
 <img src="zhy.jpg" alt="" style="float: left;margin-right: -120px;position: relative;z-index: 2">
 <img src="zhy.jpg" alt="" style="float: left;margin-right: -120px;position: relative;z-index: 1">
 <div style="height:200px;background: yellow;margin: 300px 0 0 220px;position: relative;z-index: 0">
 	<img src="zhy.jpg" alt="" style="margin-left: -100px;position: relative;z-index: -1">
 </div>
 	
 </body>
</html>